<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态推荐 - 知享社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f3f4f6;
            color: #111827;
            line-height: 1.6;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #3b82f6;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
        }
        
        .nav-link {
            color: #4b5563;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #3b82f6;
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 页面标题和筛选 */
        .page-header {
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 1rem;
        }
        
        /* 筛选面板 */
        .filter-panel {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
        
        .filter-row {
            margin-bottom: 1rem;
        }
        
        .filter-label {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #374151;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .filter-btn {
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 0.9rem;
            transition: all 0.2s;
        }
        
        .filter-btn:hover, .filter-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .advanced-filters {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #f3f4f6;
        }
        
        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }
        
        .filter-input-group {
            flex: 1;
            min-width: 200px;
        }
        
        .date-range {
            display: flex;
            gap: 0.5rem;
        }
        
        .date-range .form-control {
            flex: 1;
        }
        
        .apply-filters {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        /* 动态卡片通用样式 */
        .feed-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .feed-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.07);
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
            color: #111827;
            text-decoration: none;
        }
        
        .author-name:hover {
            color: #3b82f6;
            text-decoration: underline;
        }
        
        .post-time {
            font-size: 0.85rem;
            color: #9ca3af;
        }
        
        .post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        
        .post-tag {
            background-color: #eff6ff;
            color: #3b82f6;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
        }
        
        /* 动态内容 */
        .post-content {
            padding: 1.5rem;
            font-size: 1.05rem;
            color: #374151;
        }
        
        .post-content p {
            margin-bottom: 0.75rem;
        }
        
        .post-content p:last-child {
            margin-bottom: 0;
        }
        
        /* 图片容器 */
        .post-images {
            padding: 0 1.5rem 1.5rem;
        }
        
        .single-image {
            width: 100%;
            border-radius: 8px;
            object-fit: cover;
            max-height: 500px;
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .image-grid.two-images {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .image-grid.three-images {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .image-grid.four-images {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .grid-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-image.big {
            grid-row: span 2;
            grid-column: span 1;
        }
        
        .image-overlay {
            position: relative;
        }
        
        .image-count {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(0,0,0,0.6);
            color: white;
            padding: 4px 8px;
            border-radius: 4px 0 0 0;
            font-size: 0.8rem;
        }
        
        /* 互动区域 */
        .post-actions {
            display: flex;
            justify-content: space-around;
            padding: 0.75rem 1.5rem;
            border-top: 1px solid #f3f4f6;
        }
        
        .action-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #6b7280;
            font-size: 0.9rem;
            cursor: pointer;
            transition: color 0.2s;
            padding: 4px 12px;
            border-radius: 4px;
        }
        
        .action-item:hover {
            background-color: #f3f4f6;
        }
        
        .action-item.liked {
            color: #dc2626;
        }
        
        .action-item.bookmarked {
            color: #d97706;
        }
        
        .action-item.reposted {
            color: #10b981;
        }
        
        .action-count {
            font-weight: 500;
        }
        
        /* 转发样式 */
        .repost-container {
            background-color: #f9fafb;
            border-radius: 8px;
            padding: 1rem;
            margin: 0 1.5rem 1.5rem;
            border: 1px solid #f3f4f6;
        }
        
        .repost-header {
            color: #6b7280;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .original-post {
            font-size: 0.95rem;
        }
        
        .original-post .post-content {
            padding: 0 0 0.75rem;
            font-size: 0.95rem;
        }
        
        .original-post .post-images {
            padding: 0 0 0.25rem;
        }
        
        .original-post .single-image {
            max-height: 300px;
        }
        
        .original-post .author-info {
            padding: 0 0 0.75rem;
            border-bottom: none;
        }
        
        /* 紧凑布局样式 */
        .compact-feed {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .compact-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .compact-content {
            flex: 1;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        
        .compact-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
        }
        
        /* 杂志风格布局 */
        .magazine-feed {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .magazine-featured {
            grid-column: span 12;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
        
        .magazine-item {
            grid-column: span 4;
        }
        
        .magazine-large {
            grid-column: span 8;
        }
        
        .magazine-content {
            padding: 1.5rem;
        }
        
        .magazine-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #111827;
        }
        
        /* 布局切换器 */
        .layout-switcher {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            justify-content: center;
        }
        
        .layout-btn {
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }
        
        .layout-btn:hover, .layout-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        /* 数据统计 */
        .post-stats {
            display: flex;
            gap: 1.5rem;
            padding: 0 1.5rem 0.75rem;
            font-size: 0.85rem;
            color: #6b7280;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 筛选结果提示 */
        .filter-results {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background-color: #eff6ff;
            border-radius: 8px;
            color: #1e40af;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        
        .active-filter-tag {
            background-color: #dbeafe;
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .remove-filter {
            cursor: pointer;
            font-weight: bold;
            font-size: 1rem;
            line-height: 1;
        }
        
        /* 加载动画 */
        .loader {
            width: 48px;
            height: 48px;
            border: 5px solid #f3f4f6;
            border-bottom-color: #3b82f6;
            border-radius: 50%;
            animation: rotation 1s linear infinite;
            margin: 2rem auto;
            display: none;
        }
        
        @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式调整 */
        @media (max-width: 1200px) {
            .magazine-item {
                grid-column: span 6;
            }
            
            .magazine-large {
                grid-column: span 6;
            }
        }
        
        @media (max-width: 992px) {
            .magazine-featured {
                grid-template-columns: 1fr;
            }
            
            .filter-group {
                flex-direction: column;
                align-items: stretch;
            }
        }
        
        @media (max-width: 768px) {
            .magazine-item, .magazine-large {
                grid-column: span 12;
            }
            
            .action-item span:not(.action-count) {
                display: none;
            }
            
            .action-item {
                justify-content: center;
                flex: 1;
            }
            
            .filter-options {
                flex-wrap: wrap;
            }
            
            .post-stats {
                gap: 1rem;
                font-size: 0.8rem;
            }
            
            .filter-results {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .compact-feed {
                grid-template-columns: 1fr;
            }
            
            .image-grid {
                grid-template-columns: 1fr;
            }
            
            .grid-image.big {
                grid-row: span 1;
                grid-column: span 1;
            }
            
            .date-range {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-lightbulb"></i>
                <span>知享社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="mx-auto search-bar">
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill" placeholder="搜索动态、话题或用户..." aria-label="Search">
                        <button class="btn btn-primary rounded-pill ms-2" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <ul class="navbar-nav ms-auto gap-3">
                    <li class="nav-item">
                        <a href="#" class="nav-link active">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">动态</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">关注</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary rounded-pill">
                            <i class="fas fa-pen me-1"></i> 发布
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <!-- 页面标题和筛选 -->
        <div class="page-header">
            <h1 class="page-title">为你推荐</h1>
            
            <!-- 筛选面板 -->
            <div class="filter-panel">
                <!-- 基础筛选 -->
                <div class="filter-row">
                    <div class="filter-label">内容类型</div>
                    <div class="filter-options">
                        <button class="filter-btn active" data-filter="type" data-value="all">全部</button>
                        <button class="filter-btn" data-filter="type" data-value="text">纯文字</button>
                        <button class="filter-btn" data-filter="type" data-value="image">图片</button>
                        <button class="filter-btn" data-filter="type" data-value="repost">转发</button>
                    </div>
                </div>
                
                <div class="filter-row">
                    <div class="filter-label">内容来源</div>
                    <div class="filter-options">
                        <button class="filter-btn active" data-filter="source" data-value="all">全部</button>
                        <button class="filter-btn" data-filter="source" data-value="following">关注的人</button>
                        <button class="filter-btn" data-filter="source" data-value="trending">热门推荐</button>
                        <button class="filter-btn" data-filter="source" data-value="recent">最新发布</button>
                    </div>
                </div>
                
                <div class="filter-row">
                    <div class="filter-label">话题标签</div>
                    <div class="filter-options">
                        <button class="filter-btn active" data-filter="tag" data-value="all">全部</button>
                        <button class="filter-btn" data-filter="tag" data-value="ai">人工智能</button>
                        <button class="filter-btn" data-filter="tag" data-value="photography">摄影</button>
                        <button class="filter-btn" data-filter="tag" data-value="travel">旅行</button>
                        <button class="filter-btn" data-filter="tag" data-value="architecture">建筑</button>
                        <button class="filter-btn" data-filter="tag" data-value="education">教育</button>
                    </div>
                </div>
                
                <!-- 高级筛选 -->
                <div class="advanced-filters">
                    <div class="filter-label">高级筛选</div>
                    <div class="filter-group">
                        <div class="filter-input-group">
                            <label class="form-label">互动量</label>
                            <select class="form-select" id="engagement-filter">
                                <option value="all">全部</option>
                                <option value="high">高互动 (>100赞)</option>
                                <option value="medium">中等互动 (20-100赞)</option>
                                <option value="low">低互动 (<20赞)</option>
                            </select>
                        </div>
                        
                        <div class="filter-input-group">
                            <label class="form-label">发布时间</label>
                            <div class="date-range">
                                <input type="date" class="form-control" id="start-date">
                                <input type="date" class="form-control" id="end-date">
                            </div>
                        </div>
                        
                        <div class="filter-input-group">
                            <label class="form-label">作者</label>
                            <input type="text" class="form-control" id="author-filter" placeholder="输入作者名称">
                        </div>
                    </div>
                    
                    <div class="apply-filters">
                        <button class="btn btn-outline-secondary" id="reset-filters">重置筛选</button>
                        <button class="btn btn-primary" id="apply-filters">应用筛选</button>
                    </div>
                </div>
            </div>
            
            <!-- 筛选结果提示 -->
            <div class="filter-results" style="display: none;">
                <div>
                    <strong>已应用筛选条件</strong>
                    <div class="active-filters" id="active-filters-container"></div>
                </div>
                <button class="btn btn-sm btn-outline-primary" id="clear-all-filters">清除全部</button>
            </div>
            
            <!-- 布局切换 -->
            <div class="layout-switcher">
                <button class="layout-btn active" id="standard-layout">
                    <i class="fas fa-th-large"></i>
                    <span>标准布局</span>
                </button>
                <button class="layout-btn" id="compact-layout">
                    <i class="fas fa-th"></i>
                    <span>紧凑布局</span>
                </button>
                <button class="layout-btn" id="magazine-layout">
                    <i class="fas fa-newspaper"></i>
                    <span>杂志布局</span>
                </button>
            </div>
        </div>
        
        <!-- 加载动画 -->
        <div class="loader" id="loader"></div>
        
        <!-- 标准布局动态流 -->
        <div class="feed-container" id="standard-feed">
            <!-- 原创无图片动态 -->
            <div class="feed-card" data-type="text" data-source="recent" data-tag="ai" data-engagement="medium" data-author="李华">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=1" alt="李华的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">李华</a>
                        <div class="post-time">2小时前</div>
                        <div class="post-tags">
                            <span class="post-tag">#人工智能</span>
                            <span class="post-tag">#艺术创作</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>今天参加了一场关于人工智能与艺术创作的研讨会，收获很大。特别是关于AI如何辅助创意过程，而不是取代艺术家的讨论很有启发性。</p>
                    <p>有人认为，未来的创作将是人类与AI的协作，人类提供创意和情感，AI提供技术实现和可能性拓展。这种模式可能会带来艺术表达的全新维度。</p>
                    <p>大家怎么看AI在创作领域的应用？</p>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>1.2k 浏览</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>36 评论</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>18 转发</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-text">点赞</span>
                        <span class="action-count">128</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                        <span class="action-text">评论</span>
                        <span class="action-count">36</span>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                        <span class="action-text">转发</span>
                        <span class="action-count">18</span>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                        <span class="action-text">收藏</span>
                    </div>
                </div>
            </div>
            
            <!-- 转发的单张图片动态 -->
            <div class="feed-card" data-type="repost" data-source="following" data-tag="photography" data-engagement="medium" data-author="刘洋">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=7" alt="刘洋的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">刘洋</a>
                        <div class="post-time">昨天 19:45</div>
                        <div class="post-tags">
                            <span class="post-tag">#摄影</span>
                            <span class="post-tag">#城市</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>非常同意张明的观点，这座城市的天际线确实美得令人窒息。上周我也在类似的时间点拍了一些照片，改天分享出来。</p>
                </div>
                
                <!-- 转发的原始内容 -->
                <div class="repost-container">
                    <div class="repost-header">
                        <i class="fas fa-share-alt"></i>
                        <span>转发了 张明 的动态</span>
                    </div>
                    
                    <div class="original-post">
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=2" alt="张明的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">张明</a>
                                <div class="post-time">昨天 15:30</div>
                            </div>
                        </div>
                        
                        <div class="post-content">
                            <p>傍晚时分在城市天际线拍摄的照片，金色的阳光给建筑镀上了一层温暖的光晕。这种光线条件下，建筑的线条和轮廓特别清晰。</p>
                        </div>
                        
                        <div class="post-images">
                            <img src="https://picsum.photos/1200/600?random=10" alt="城市天际线照片" class="single-image">
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>2.5k 浏览</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>24 评论</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>7 转发</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-text">点赞</span>
                        <span class="action-count">93</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                        <span class="action-text">评论</span>
                        <span class="action-count">24</span>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                        <span class="action-text">转发</span>
                        <span class="action-count">7</span>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                        <span class="action-text">收藏</span>
                    </div>
                </div>
            </div>
            
            <!-- 原创两张图片动态 -->
            <div class="feed-card" data-type="image" data-source="trending" data-tag="photography" data-engagement="high" data-author="王芳">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=3" alt="王芳的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">王芳</a>
                        <div class="post-time">3天前</div>
                        <div class="post-tags">
                            <span class="post-tag">#摄影</span>
                            <span class="post-tag">#美食</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>分享两张最近的美食摄影作品，尝试了不同的光线设置和构图方式。第一张用了侧光突出食物的质感，第二张用了顶光营造温馨氛围。</p>
                </div>
                
                <div class="post-images">
                    <div class="image-grid two-images">
                        <img src="https://picsum.photos/600/600?random=20" alt="美食摄影作品1" class="grid-image">
                        <img src="https://picsum.photos/600/600?random=21" alt="美食摄影作品2" class="grid-image">
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>1.8k 浏览</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>23 评论</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>12 转发</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-text">点赞</span>
                        <span class="action-count">187</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                        <span class="action-text">评论</span>
                        <span class="action-count">23</span>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                        <span class="action-text">转发</span>
                        <span class="action-count">12</span>
                    </div>
                    <div class="action-item bookmark-action bookmarked">
                        <i class="fas fa-bookmark"></i>
                        <span class="action-text">收藏</span>
                    </div>
                </div>
            </div>
            
            <!-- 转发的无图动态 -->
            <div class="feed-card" data-type="repost" data-source="following" data-tag="ai,education" data-engagement="medium" data-author="孙颖">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=8" alt="孙颖的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">孙颖</a>
                        <div class="post-time">4天前</div>
                        <div class="post-tags">
                            <span class="post-tag">#人工智能</span>
                            <span class="post-tag">#教育</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>作为一名艺术教育工作者，我认为AI确实应该被视为工具而非替代者。关键在于如何将这些新技术融入传统教育中，培养学生的创造性思维。</p>
                </div>
                
                <!-- 转发的原始内容 -->
                <div class="repost-container">
                    <div class="repost-header">
                        <i class="fas fa-share-alt"></i>
                        <span>转发了 李华 的动态</span>
                    </div>
                    
                    <div class="original-post">
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=1" alt="李华的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">李华</a>
                                <div class="post-time">4天前</div>
                            </div>
                        </div>
                        
                        <div class="post-content">
                            <p>人工智能在艺术领域的应用越来越广泛，但我始终认为技术应该服务于创意，而不是取代创意。真正的艺术表达来源于人类独特的情感和经历。</p>
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>956 浏览</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>41 评论</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>23 转发</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action liked">
                        <i class="fas fa-heart"></i>
                        <span class="action-text">点赞</span>
                        <span class="action-count">156</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                        <span class="action-text">评论</span>
                        <span class="action-count">41</span>
                    </div>
                    <div class="action-item repost-action reposted">
                        <i class="fas fa-share-alt"></i>
                        <span class="action-text">转发</span>
                        <span class="action-count">23</span>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                        <span class="action-text">收藏</span>
                    </div>
                </div>
            </div>
            
            <!-- 原创三张图片动态 -->
            <div class="feed-card" data-type="image" data-source="trending" data-tag="travel" data-engagement="high" data-author="刘伟">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=4" alt="刘伟的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">刘伟</a>
                        <div class="post-time">4天前</div>
                        <div class="post-tags">
                            <span class="post-tag">#旅行</span>
                            <span class="post-tag">#自然</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>周末徒步旅行的照片记录，沿途的风景美不胜收。特别是山顶的云海，简直如仙境一般。大自然的鬼斧神工总是让人惊叹。</p>
                </div>
                
                <div class="post-images">
                    <div class="image-grid three-images">
                        <img src="https://picsum.photos/600/900?random=30" alt="徒步旅行照片1" class="grid-image big">
                        <img src="https://picsum.photos/600/450?random=31" alt="徒步旅行照片2" class="grid-image">
                        <img src="https://picsum.photos/600/450?random=32" alt="徒步旅行照片3" class="grid-image">
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>3.2k 浏览</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>56 评论</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>42 转发</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-text">点赞</span>
                        <span class="action-count">324</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                        <span class="action-text">评论</span>
                        <span class="action-count">56</span>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                        <span class="action-text">转发</span>
                        <span class="action-count">42</span>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                        <span class="action-text">收藏</span>
                    </div>
                </div>
            </div>
            
            <!-- 转发的多图动态 -->
            <div class="feed-card" data-type="repost" data-source="trending" data-tag="architecture" data-engagement="medium" data-author="周明">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=9" alt="周明的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">周明</a>
                        <div class="post-time">1周前</div>
                        <div class="post-tags">
                            <span class="post-tag">#建筑</span>
                            <span class="post-tag">#城市</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>这些建筑细节拍得太精彩了！我也很喜欢捕捉城市中这些被忽略的美。最后一张的几何线条尤其出色。</p>
                </div>
                
                <!-- 转发的原始内容 -->
                <div class="repost-container">
                    <div class="repost-header">
                        <i class="fas fa-share-alt"></i>
                        <span>转发了 赵杰 的动态</span>
                    </div>
                    
                    <div class="original-post">
                        <div class="author-info">
                            <img src="https://picsum.photos/200/200?random=5" alt="赵杰的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">赵杰</a>
                                <div class="post-time">1周前</div>
                            </div>
                        </div>
                        
                        <div class="post-content">
                            <p>分享一组城市建筑细节的照片，发现身边不为人注意的美。有时候放慢脚步，仔细观察，会发现熟悉的城市也有很多惊喜。</p>
                        </div>
                        
                        <div class="post-images">
                            <div class="image-grid four-images">
                                <img src="https://picsum.photos/600/600?random=40" alt="建筑细节照片1" class="grid-image">
                                <img src="https://picsum.photos/600/600?random=41" alt="建筑细节照片2" class="grid-image">
                                <img src="https://picsum.photos/600/600?random=42" alt="建筑细节照片3" class="grid-image">
                                <div class="image-overlay">
                                    <img src="https://picsum.photos/600/600?random=43" alt="建筑细节照片4" class="grid-image">
                                    <div class="image-count">+1</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>2.1k 浏览</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>37 评论</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>15 转发</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action liked">
                        <i class="fas fa-heart"></i>
                        <span class="action-text">点赞</span>
                        <span class="action-count">178</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                        <span class="action-text">评论</span>
                        <span class="action-count">37</span>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                        <span class="action-text">转发</span>
                        <span class="action-count">15</span>
                    </div>
                    <div class="action-item bookmark-action bookmarked">
                        <i class="fas fa-bookmark"></i>
                        <span class="action-text">收藏</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 紧凑布局动态流 (默认隐藏) -->
        <div class="compact-feed" id="compact-feed" style="display: none;">
            <!-- 紧凑布局的动态项 -->
            <div class="feed-card compact-card" data-type="text" data-source="recent" data-tag="ai" data-engagement="medium" data-author="李华">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=1" alt="李华的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">李华</a>
                        <div class="post-time">2小时前</div>
                        <div class="post-tags">
                            <span class="post-tag">#人工智能</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content compact-content">
                    <p>今天参加了一场关于人工智能与艺术创作的研讨会，收获很大。特别是关于AI如何辅助创意过程，而不是取代艺术家的讨论很有启发性。</p>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>1.2k</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>36</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>18</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-count">128</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                    </div>
                </div>
            </div>
            
            <div class="feed-card compact-card" data-type="repost" data-source="following" data-tag="photography" data-engagement="medium" data-author="刘洋">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=7" alt="刘洋的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">刘洋</a>
                        <div class="post-time">昨天 19:45</div>
                        <div class="post-tags">
                            <span class="post-tag">#摄影</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content compact-content">
                    <p>非常同意张明的观点，这座城市的天际线确实美得令人窒息。</p>
                </div>
                
                <div class="repost-container" style="padding: 0.75rem; margin: 0 1.5rem 1rem;">
                    <div class="repost-header" style="font-size: 0.85rem;">
                        <i class="fas fa-share-alt"></i>
                        <span>转发了 张明 的动态</span>
                    </div>
                    
                    <div class="original-post">
                        <div class="post-images">
                            <img src="https://picsum.photos/1200/600?random=10" alt="城市天际线照片" class="compact-image">
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>2.5k</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>24</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>7</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-count">93</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                    </div>
                </div>
            </div>
            
            <div class="feed-card compact-card" data-type="image" data-source="trending" data-tag="photography" data-engagement="high" data-author="王芳">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=3" alt="王芳的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">王芳</a>
                        <div class="post-time">3天前</div>
                        <div class="post-tags">
                            <span class="post-tag">#美食</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content compact-content">
                    <p>分享两张最近的美食摄影作品，尝试了不同的光线设置和构图方式。</p>
                </div>
                
                <div class="post-images">
                    <div class="image-grid two-images">
                        <img src="https://picsum.photos/600/600?random=20" alt="美食摄影作品1" class="grid-image">
                        <img src="https://picsum.photos/600/600?random=21" alt="美食摄影作品2" class="grid-image">
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>1.8k</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>23</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>12</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-count">187</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                    </div>
                    <div class="action-item bookmark-action bookmarked">
                        <i class="fas fa-bookmark"></i>
                    </div>
                </div>
            </div>
            
            <div class="feed-card compact-card" data-type="repost" data-source="following" data-tag="ai,education" data-engagement="medium" data-author="孙颖">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=8" alt="孙颖的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">孙颖</a>
                        <div class="post-time">4天前</div>
                        <div class="post-tags">
                            <span class="post-tag">#教育</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content compact-content">
                    <p>作为一名艺术教育工作者，我认为AI确实应该被视为工具而非替代者。</p>
                </div>
                
                <div class="repost-container" style="padding: 0.75rem; margin: 0 1.5rem 1rem;">
                    <div class="repost-header" style="font-size: 0.85rem;">
                        <i class="fas fa-share-alt"></i>
                        <span>转发了 李华 的动态</span>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>956</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>41</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>23</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action liked">
                        <i class="fas fa-heart"></i>
                        <span class="action-count">156</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                    </div>
                    <div class="action-item repost-action reposted">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                    </div>
                </div>
            </div>
            
            <div class="feed-card compact-card" data-type="image" data-source="trending" data-tag="travel" data-engagement="high" data-author="刘伟">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=4" alt="刘伟的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">刘伟</a>
                        <div class="post-time">4天前</div>
                        <div class="post-tags">
                            <span class="post-tag">#旅行</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content compact-content">
                    <p>周末徒步旅行的照片记录，沿途的风景美不胜收。特别是山顶的云海，简直如仙境一般。</p>
                </div>
                
                <div class="post-images">
                    <div class="image-grid three-images">
                        <img src="https://picsum.photos/600/900?random=30" alt="徒步旅行照片1" class="grid-image big">
                        <img src="https://picsum.photos/600/450?random=31" alt="徒步旅行照片2" class="grid-image">
                        <div class="image-overlay">
                            <img src="https://picsum.photos/600/450?random=32" alt="徒步旅行照片3" class="grid-image">
                            <div class="image-count">+1</div>
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>3.2k</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>56</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>42</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action">
                        <i class="far fa-heart"></i>
                        <span class="action-count">324</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                    </div>
                    <div class="action-item bookmark-action">
                        <i class="far fa-bookmark"></i>
                    </div>
                </div>
            </div>
            
            <div class="feed-card compact-card" data-type="repost" data-source="trending" data-tag="architecture" data-engagement="medium" data-author="周明">
                <div class="author-info">
                    <img src="https://picsum.photos/200/200?random=9" alt="周明的头像" class="author-avatar">
                    <div>
                        <a href="#" class="author-name">周明</a>
                        <div class="post-time">1周前</div>
                        <div class="post-tags">
                            <span class="post-tag">#建筑</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-content compact-content">
                    <p>这些建筑细节拍得太精彩了！我也很喜欢捕捉城市中这些被忽略的美。</p>
                </div>
                
                <div class="repost-container" style="padding: 0.75rem; margin: 0 1.5rem 1rem;">
                    <div class="repost-header" style="font-size: 0.85rem;">
                        <i class="fas fa-share-alt"></i>
                        <span>转发了 赵杰 的动态</span>
                    </div>
                    
                    <div class="original-post">
                        <div class="post-images">
                            <img src="https://picsum.photos/600/600?random=40" alt="建筑细节照片" class="compact-image">
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>2.1k</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-comment"></i>
                        <span>37</span>
                    </div>
                    <div class="stat-item">
                        <i class="far fa-share-alt"></i>
                        <span>15</span>
                    </div>
                </div>
                
                <div class="post-actions">
                    <div class="action-item like-action liked">
                        <i class="fas fa-heart"></i>
                        <span class="action-count">178</span>
                    </div>
                    <div class="action-item comment-action">
                        <i class="far fa-comment"></i>
                    </div>
                    <div class="action-item repost-action">
                        <i class="far fa-share-alt"></i>
                    </div>
                    <div class="action-item bookmark-action bookmarked">
                        <i class="fas fa-bookmark"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 杂志布局动态流 (默认隐藏) -->
        <div id="magazine-feed" style="display: none;">
            <!-- 杂志风格的特色内容 -->
            <div class="magazine-featured feed-card" data-type="image" data-source="trending" data-tag="travel" data-engagement="high" data-author="刘伟">
                <div>
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=4" alt="刘伟的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">刘伟</a>
                            <div class="post-time">4天前</div>
                            <div class="post-tags">
                                <span class="post-tag">#旅行</span>
                                <span class="post-tag">#自然</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="magazine-content">
                        <h3 class="magazine-title">周末徒步旅行：云海与山景</h3>
                        <p>周末徒步旅行的照片记录，沿途的风景美不胜收。特别是山顶的云海，简直如仙境一般。大自然的鬼斧神工总是让人惊叹。</p>
                        
                        <div class="post-stats" style="padding: 0 0 0.75rem;">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>3.2k 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>56 评论</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-share-alt"></i>
                                <span>42 转发</span>
                            </div>
                        </div>
                        
                        <div class="post-actions" style="justify-content: flex-start; border-top: none; padding-top: 0;">
                            <div class="action-item like-action">
                                <i class="far fa-heart"></i>
                                <span class="action-text">点赞</span>
                                <span class="action-count">324</span>
                            </div>
                            <div class="action-item comment-action">
                                <i class="far fa-comment"></i>
                                <span class="action-text">评论</span>
                            </div>
                            <div class="action-item repost-action">
                                <i class="far fa-share-alt"></i>
                                <span class="action-text">转发</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="post-images" style="padding: 0;">
                    <img src="https://picsum.photos/1200/900?random=30" alt="徒步旅行照片" class="single-image" style="border-radius: 0 12px 12px 0; max-height: none; height: 100%;">
                </div>
            </div>
            
            <div class="magazine-feed">
                <div class="feed-card magazine-item" data-type="repost" data-source="following" data-tag="photography" data-engagement="medium" data-author="刘洋">
                    <div class="post-images" style="padding: 0;">
                        <img src="https://picsum.photos/600/400?random=10" alt="城市天际线照片" class="single-image" style="border-radius: 12px 12px 0 0;">
                    </div>
                    
                    <div class="magazine-content">
                        <div class="author-info" style="padding: 0 0 1rem; border-bottom: none;">
                            <img src="https://picsum.photos/200/200?random=7" alt="刘洋的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">刘洋</a>
                                <div class="post-time">昨天 19:45</div>
                                <div class="post-tags">
                                    <span class="post-tag">#摄影</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="repost-header" style="margin-bottom: 0.5rem;">
                            <i class="fas fa-share-alt"></i>
                            <span>转发了 张明 的动态</span>
                        </div>
                        
                        <h3 class="magazine-title">城市天际线的金色时刻</h3>
                        <p>非常同意张明的观点，这座城市的天际线确实美得令人窒息。</p>
                        
                        <div class="post-stats" style="padding: 0.5rem 0;">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>2.5k 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>24 评论</span>
                            </div>
                        </div>
                        
                        <div class="post-actions" style="justify-content: flex-start; border-top: none; padding-top: 0;">
                            <div class="action-item like-action">
                                <i class="far fa-heart"></i>
                                <span class="action-count">93</span>
                            </div>
                            <div class="action-item repost-action">
                                <i class="far fa-share-alt"></i>
                                <span class="action-count">7</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="feed-card magazine-large" data-type="text" data-source="recent" data-tag="ai" data-engagement="medium" data-author="李华">
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=1" alt="李华的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">李华</a>
                            <div class="post-time">2小时前</div>
                            <div class="post-tags">
                                <span class="post-tag">#人工智能</span>
                                <span class="post-tag">#艺术创作</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="magazine-content">
                        <h3 class="magazine-title">人工智能与艺术创作：协作而非取代</h3>
                        <p>今天参加了一场关于人工智能与艺术创作的研讨会，收获很大。特别是关于AI如何辅助创意过程，而不是取代艺术家的讨论很有启发性。</p>
                        <p>有人认为，未来的创作将是人类与AI的协作，人类提供创意和情感，AI提供技术实现和可能性拓展。这种模式可能会带来艺术表达的全新维度。</p>
                        
                        <div class="post-stats" style="padding: 0.5rem 0;">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>1.2k 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>36 评论</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-share-alt"></i>
                                <span>18 转发</span>
                            </div>
                        </div>
                        
                        <div class="post-actions" style="justify-content: flex-start; border-top: none; padding-top: 0;">
                            <div class="action-item like-action">
                                <i class="far fa-heart"></i>
                                <span class="action-text">点赞</span>
                                <span class="action-count">128</span>
                            </div>
                            <div class="action-item comment-action">
                                <i class="far fa-comment"></i>
                                <span class="action-text">评论</span>
                            </div>
                            <div class="action-item repost-action">
                                <i class="far fa-share-alt"></i>
                                <span class="action-text">转发</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="feed-card magazine-item" data-type="repost" data-source="following" data-tag="ai,education" data-engagement="medium" data-author="孙颖">
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=8" alt="孙颖的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">孙颖</a>
                            <div class="post-time">4天前</div>
                            <div class="post-tags">
                                <span class="post-tag">#教育</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="magazine-content">
                        <div class="repost-header" style="margin-bottom: 0.5rem;">
                            <i class="fas fa-share-alt"></i>
                            <span>转发了 李华 的动态</span>
                        </div>
                        
                        <h3 class="magazine-title">AI作为教育工具的潜力</h3>
                        <p>作为一名艺术教育工作者，我认为AI确实应该被视为工具而非替代者。关键在于如何将这些新技术融入传统教育中，培养学生的创造性思维。</p>
                        
                        <div class="post-stats" style="padding: 0.5rem 0;">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>956 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>41 评论</span>
                            </div>
                        </div>
                        
                        <div class="post-actions" style="justify-content: flex-start; border-top: none; padding-top: 0;">
                            <div class="action-item like-action liked">
                                <i class="fas fa-heart"></i>
                                <span class="action-count">156</span>
                            </div>
                            <div class="action-item repost-action reposted">
                                <i class="fas fa-share-alt"></i>
                                <span class="action-count">23</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="feed-card magazine-item" data-type="image" data-source="trending" data-tag="photography" data-engagement="high" data-author="王芳">
                    <div class="post-images" style="padding: 0;">
                        <div class="image-grid two-images" style="border-radius: 12px 12px 0 0;">
                            <img src="https://picsum.photos/600/600?random=20" alt="美食摄影作品1" class="grid-image">
                            <img src="https://picsum.photos/600/600?random=21" alt="美食摄影作品2" class="grid-image">
                        </div>
                    </div>
                    
                    <div class="magazine-content">
                        <div class="author-info" style="padding: 0 0 1rem; border-bottom: none;">
                            <img src="https://picsum.photos/200/200?random=3" alt="王芳的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">王芳</a>
                                <div class="post-time">3天前</div>
                                <div class="post-tags">
                                    <span class="post-tag">#美食</span>
                                </div>
                            </div>
                        </div>
                        
                        <h3 class="magazine-title">美食摄影的光线实验</h3>
                        <p>分享两张最近的美食摄影作品，尝试了不同的光线设置和构图方式。</p>
                        
                        <div class="post-stats" style="padding: 0.5rem 0;">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>1.8k 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>23 评论</span>
                            </div>
                        </div>
                        
                        <div class="post-actions" style="justify-content: flex-start; border-top: none; padding-top: 0;">
                            <div class="action-item like-action">
                                <i class="far fa-heart"></i>
                                <span class="action-count">187</span>
                            </div>
                            <div class="action-item repost-action">
                                <i class="far fa-share-alt"></i>
                                <span class="action-count">12</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="feed-card magazine-large" data-type="repost" data-source="trending" data-tag="architecture" data-engagement="medium" data-author="周明">
                    <div class="post-images" style="padding: 0;">
                        <img src="https://picsum.photos/1200/500?random=40" alt="建筑细节照片" class="single-image" style="border-radius: 12px 12px 0 0;">
                    </div>
                    
                    <div class="magazine-content">
                        <div class="author-info" style="padding: 0 0 1rem; border-bottom: none;">
                            <img src="https://picsum.photos/200/200?random=9" alt="周明的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">周明</a>
                                <div class="post-time">1周前</div>
                                <div class="post-tags">
                                    <span class="post-tag">#建筑</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="repost-header" style="margin-bottom: 0.5rem;">
                            <i class="fas fa-share-alt"></i>
                            <span>转发了 赵杰 的动态</span>
                        </div>
                        
                        <h3 class="magazine-title">城市建筑的细节之美</h3>
                        <p>这些建筑细节拍得太精彩了！我也很喜欢捕捉城市中这些被忽略的美。最后一张的几何线条尤其出色。</p>
                        
                        <div class="post-stats" style="padding: 0.5rem 0;">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>2.1k 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>37 评论</span>
                            </div>
                        </div>
                        
                        <div class="post-actions" style="justify-content: flex-start; border-top: none; padding-top: 0;">
                            <div class="action-item like-action liked">
                                <i class="fas fa-heart"></i>
                                <span class="action-text">点赞</span>
                                <span class="action-count">178</span>
                            </div>
                            <div class="action-item comment-action">
                                <i class="far fa-comment"></i>
                                <span class="action-text">评论</span>
                            </div>
                            <div class="action-item repost-action">
                                <i class="far fa-share-alt"></i>
                                <span class="action-text">转发</span>
                                <span class="action-count">15</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center mt-5 mb-3">
            <button class="btn btn-outline-primary rounded-pill px-5 py-3" id="load-more">
                <i class="fas fa-spinner fa-spin me-2" style="display: none;"></i>
                <span>加载更多动态</span>
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-top py-5 mt-5">
        <div class="container">
            <div class="text-center text-muted">
                <div class="mb-3">
                    <a href="#" class="text-muted me-4"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-muted me-4"><i class="fab fa-wechat fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
                <p>&copy; 2023 知享社交 - 分享知识，连接思想</p>
                <p class="small mt-2">隐私政策 | 使用条款 | 关于我们</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 存储当前筛选条件
        const currentFilters = {
            type: 'all',
            source: 'all',
            tag: 'all',
            engagement: 'all',
            startDate: '',
            endDate: '',
            author: ''
        };
        
        // 布局切换功能
        const standardLayout = document.getElementById('standard-feed');
        const compactLayout = document.getElementById('compact-feed');
        const magazineLayout = document.getElementById('magazine-feed');
        const layoutBtns = document.querySelectorAll('.layout-btn');
        let currentFeed = standardLayout;
        
        document.getElementById('standard-layout').addEventListener('click', function() {
            setActiveLayout(this, standardLayout, compactLayout, magazineLayout);
        });
        
        document.getElementById('compact-layout').addEventListener('click', function() {
            setActiveLayout(this, compactLayout, standardLayout, magazineLayout);
        });
        
        document.getElementById('magazine-layout').addEventListener('click', function() {
            setActiveLayout(this, magazineLayout, standardLayout, compactLayout);
        });
        
        function setActiveLayout(btn, activeFeed, ...inactiveFeeds) {
            // 更新按钮状态
            layoutBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            
            // 更新当前活跃的feed
            currentFeed = activeFeed;
            
            // 更新布局显示
            activeFeed.style.display = 'block';
            inactiveFeeds.forEach(feed => feed.style.display = 'none');
            
            // 应用当前筛选条件
            applyFilters();
        }
        
        // 筛选按钮功能
        const filterBtns = document.querySelectorAll('.filter-btn');
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const filterType = this.getAttribute('data-filter');
                const filterValue = this.getAttribute('data-value');
                
                // 更新同组按钮状态
                filterBtns.forEach(b => {
                    if (b.getAttribute('data-filter') === filterType) {
                        b.classList.remove('active');
                    }
                });
                this.classList.add('active');
                
                // 更新当前筛选条件
                currentFilters[filterType] = filterValue;
                
                // 应用筛选
                applyFilters();
            });
        });
        
        // 高级筛选功能
        document.getElementById('apply-filters').addEventListener('click', function() {
            // 获取高级筛选值
            currentFilters.engagement = document.getElementById('engagement-filter').value;
            currentFilters.startDate = document.getElementById('start-date').value;
            currentFilters.endDate = document.getElementById('end-date').value;
            currentFilters.author = document.getElementById('author-filter').value.trim().toLowerCase();
            
            // 应用筛选
            applyFilters();
        });
        
        // 重置筛选
        document.getElementById('reset-filters').addEventListener('click', function() {
            document.getElementById('engagement-filter').value = 'all';
            document.getElementById('start-date').value = '';
            document.getElementById('end-date').value = '';
            document.getElementById('author-filter').value = '';
            
            // 重置当前筛选条件中的高级筛选部分
            currentFilters.engagement = 'all';
            currentFilters.startDate = '';
            currentFilters.endDate = '';
            currentFilters.author = '';
            
            // 应用筛选
            applyFilters();
        });
        
        // 清除所有筛选
        document.getElementById('clear-all-filters').addEventListener('click', clearAllFilters);
        
        function clearAllFilters() {
            // 重置所有筛选按钮
            filterBtns.forEach(btn => {
                if (btn.getAttribute('data-value') === 'all') {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            
            // 重置高级筛选
            document.getElementById('engagement-filter').value = 'all';
            document.getElementById('start-date').value = '';
            document.getElementById('end-date').value = '';
            document.getElementById('author-filter').value = '';
            
            // 重置当前筛选条件
            Object.keys(currentFilters).forEach(key => {
                currentFilters[key] = key === 'startDate' || key === 'endDate' || key === 'author' ? '' : 'all';
            });
            
            // 应用筛选
            applyFilters();
        }
        
        // 应用筛选条件
        function applyFilters() {
            // 显示加载动画
            const loader = document.getElementById('loader');
            const feedContainers = document.querySelectorAll('.feed-container, .compact-feed, #magazine-feed');
            feedContainers.forEach(container => {
                if (container.style.display !== 'none') {
                    container.style.opacity = '0.5';
                }
            });
            loader.style.display = 'block';
            
            // 模拟筛选延迟
            setTimeout(() => {
                const cards = currentFeed.querySelectorAll('.feed-card');
                let visibleCount = 0;
                
                cards.forEach(card => {
                    // 检查所有筛选条件
                    const typeMatch = currentFilters.type === 'all' || card.getAttribute('data-type') === currentFilters.type;
                    const sourceMatch = currentFilters.source === 'all' || card.getAttribute('data-source') === currentFilters.source;
                    
                    // 标签匹配（支持多个标签）
                    const cardTags = card.getAttribute('data-tag') || '';
                    const tagMatch = currentFilters.tag === 'all' || cardTags.includes(currentFilters.tag);
                    
                    // 互动量匹配
                    let engagementMatch = true;
                    if (currentFilters.engagement !== 'all') {
                        const likeCount = parseInt(card.querySelector('.action-count')?.textContent || '0');
                        switch(currentFilters.engagement) {
                            case 'high':
                                engagementMatch = likeCount > 100;
                                break;
                            case 'medium':
                                engagementMatch = likeCount >= 20 && likeCount <= 100;
                                break;
                            case 'low':
                                engagementMatch = likeCount < 20;
                                break;
                        }
                    }
                    
                    // 作者匹配
                    const authorMatch = !currentFilters.author || 
                                      (card.getAttribute('data-author')?.toLowerCase() || '').includes(currentFilters.author);
                    
                    // 日期范围匹配（这里简化处理，实际应用中需要解析日期）
                    const dateMatch = true; // 实际项目中需要实现日期筛选逻辑
                    
                    // 所有条件都满足才显示
                    const shouldShow = typeMatch && sourceMatch && tagMatch && 
                                     engagementMatch && authorMatch && dateMatch;
                    
                    card.style.display = shouldShow ? 'block' : 'none';
                    if (shouldShow) visibleCount++;
                });
                
                // 更新筛选结果提示
                updateFilterResults();
                
                // 隐藏加载动画，恢复显示
                loader.style.display = 'none';
                feedContainers.forEach(container => {
                    if (container.style.display !== 'none') {
                        container.style.opacity = '1';
                    }
                });
                
                // 显示无结果提示（如果需要）
                if (visibleCount === 0) {
                    showNoResultsMessage();
                } else {
                    hideNoResultsMessage();
                }
            }, 600);
        }
        
        // 更新筛选结果显示
        function updateFilterResults() {
            const resultsContainer = document.querySelector('.filter-results');
            const activeFiltersContainer = document.getElementById('active-filters-container');
            activeFiltersContainer.innerHTML = '';
            
            // 检查是否有活跃的筛选条件
            let hasActiveFilters = false;
            
            // 收集并显示活跃的筛选条件
            Object.keys(currentFilters).forEach(key => {
                const value = currentFilters[key];
                if (value && value !== 'all') {
                    hasActiveFilters = true;
                    
                    // 创建筛选标签
                    const filterTag = document.createElement('div');
                    filterTag.className = 'active-filter-tag';
                    
                    // 设置标签文本
                    let label = '';
                    switch(key) {
                        case 'type':
                            label = `类型: ${getTypeLabel(value)}`;
                            break;
                        case 'source':
                            label = `来源: ${getSourceLabel(value)}`;
                            break;
                        case 'tag':
                            label = `话题: ${getTagLabel(value)}`;
                            break;
                        case 'engagement':
                            label = `互动: ${getEngagementLabel(value)}`;
                            break;
                        case 'startDate':
                            label = `开始日期: ${value}`;
                            break;
                        case 'endDate':
                            label = `结束日期: ${value}`;
                            break;
                        case 'author':
                            label = `作者: ${value}`;
                            break;
                    }
                    
                    filterTag.innerHTML = `
                        <span>${label}</span>
                        <span class="remove-filter" data-filter="${key}">&times;</span>
                    `;
                    
                    activeFiltersContainer.appendChild(filterTag);
                }
            });
            
            // 显示或隐藏结果容器
            resultsContainer.style.display = hasActiveFilters ? 'flex' : 'none';
            
            // 为移除筛选按钮添加事件
            document.querySelectorAll('.remove-filter').forEach(btn => {
                btn.addEventListener('click', function() {
                    const filterType = this.getAttribute('data-filter');
                    
                    // 重置该筛选条件
                    if (filterType === 'type' || filterType === 'source' || filterType === 'tag') {
                        // 对于按钮组类型的筛选
                        currentFilters[filterType] = 'all';
                        filterBtns.forEach(b => {
                            if (b.getAttribute('data-filter') === filterType) {
                                b.classList.remove('active');
                                if (b.getAttribute('data-value') === 'all') {
                                    b.classList.add('active');
                                }
                            }
                        });
                    } else if (filterType === 'engagement') {
                        // 对于互动量筛选
                        currentFilters.engagement = 'all';
                        document.getElementById('engagement-filter').value = 'all';
                    } else if (filterType === 'startDate') {
                        // 开始日期
                        currentFilters.startDate = '';
                        document.getElementById('start-date').value = '';
                    } else if (filterType === 'endDate') {
                        // 结束日期
                        currentFilters.endDate = '';
                        document.getElementById('end-date').value = '';
                    } else if (filterType === 'author') {
                        // 作者
                        currentFilters.author = '';
                        document.getElementById('author-filter').value = '';
                    }
                    
                    // 重新应用筛选
                    applyFilters();
                });
            });
        }
        
        // 显示无结果提示
        function showNoResultsMessage() {
            let messageElement = document.getElementById('no-results-message');
            
            if (!messageElement) {
                messageElement = document.createElement('div');
                messageElement.id = 'no-results-message';
                messageElement.className = 'alert alert-info text-center';
                messageElement.textContent = '没有找到符合条件的动态，请尝试调整筛选条件。';
                currentFeed.parentNode.insertBefore(messageElement, currentFeed);
            }
            
            messageElement.style.display = 'block';
        }
        
        // 隐藏无结果提示
        function hideNoResultsMessage() {
            const messageElement = document.getElementById('no-results-message');
            if (messageElement) {
                messageElement.style.display = 'none';
            }
        }
        
        // 辅助函数：获取筛选条件的显示文本
        function getTypeLabel(value) {
            const labels = {
                'all': '全部',
                'text': '纯文字',
                'image': '图片',
                'repost': '转发'
            };
            return labels[value] || value;
        }
        
        function getSourceLabel(value) {
            const labels = {
                'all': '全部',
                'following': '关注的人',
                'trending': '热门推荐',
                'recent': '最新发布'
            };
            return labels[value] || value;
        }
        
        function getTagLabel(value) {
            const labels = {
                'all': '全部',
                'ai': '人工智能',
                'photography': '摄影',
                'travel': '旅行',
                'architecture': '建筑',
                'education': '教育'
            };
            return labels[value] || value;
        }
        
        function getEngagementLabel(value) {
            const labels = {
                'all': '全部',
                'high': '高互动 (>100赞)',
                'medium': '中等互动 (20-100赞)',
                'low': '低互动 (<20赞)'
            };
            return labels[value] || value;
        }
        
        // 点赞功能
        document.querySelectorAll('.like-action').forEach(action => {
            action.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countSpan = this.querySelector('.action-count');
                let count = parseInt(countSpan.textContent);
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('liked');
                    countSpan.textContent = count + 1;
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                    countSpan.textContent = count - 1;
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.bookmark-action').forEach(action => {
            action.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('bookmarked');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('bookmarked');
                }
            });
        });
        
        // 转发功能
        document.querySelectorAll('.repost-action').forEach(action => {
            action.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countSpan = this.querySelector('.action-count');
                let count = countSpan ? parseInt(countSpan.textContent) : 0;
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('reposted');
                    if (countSpan) countSpan.textContent = count + 1;
                    
                    // 显示转发成功提示
                    showNotification('转发成功');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('reposted');
                    if (countSpan) countSpan.textContent = count - 1;
                }
            });
        });
        
        // 评论功能
        document.querySelectorAll('.comment-action').forEach(action => {
            action.addEventListener('click', function() {
                const count = this.querySelector('.action-count')?.textContent || '0';
                const authorName = this.closest('.feed-card').querySelector('.author-name').textContent;
                alert(`查看 ${authorName} 动态的 ${count} 条评论`);
            });
        });
        
       
        // 加载更多功能
        document.getElementById('load-more').addEventListener('click', function() {
            const spinner = this.querySelector('i');
            const text = this.querySelector('span');
            
            // 显示加载状态
            spinner.style.display = 'inline-block';
            text.textContent = '加载中...';
            this.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                spinner.style.display = 'none';
                text.textContent = '加载更多动态';
                this.disabled = false;
                
                // 显示已加载全部提示
                const notification = document.createElement('div');
                notification.className = 'alert alert-info text-center mt-3';
                notification.textContent = '已加载全部动态';
                this.parentNode.appendChild(notification);
                
                // 3秒后移除提示
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            }, 1500);
        });
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 设置今天的日期为默认结束日期
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('end-date').value = today;
        });
    </script>
</body>
</html>

